<template>
	<div>
		<div class="parent">
			<div class="fdisr">
				<div style="width: 20%; height: 100%">
					<!-- {{ parentData.school.name }} -->
					{{ schoolName }}
				</div>
				<div style="width: 20%; height: 100%">
					<el-button type="primary" @click="initCildData">Change School Name</el-button>
				</div>
			</div>
		</div>
		<ReactivityComp ref="someRef" v-bind="childData" />
		<div class="use-con">
			<cpone :somebody="sname" @click-btn="changeSomebody"></cpone>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRouter, useRoute,onBeforeRouteUpdate } from "vue-router";
import ReactivityComp from "@/views/vue-test/components/Reactivity.vue";
import cpone from "@/views/vue-test/components/cp1.vue"
import { useSomething, schoolName } from "@/views/vue-test/useSomething.js";
let someRef = ref<InstanceType<typeof ReactivityComp>>();

let parentData = ref({
	name: "parent",
	school: {
		name: "ABC School",
		location: "New York",
	},
});

let childData = {
	name:"somebody",
	age:123,
}

let sname = ref("Jim")

let route = useRoute();
let router = useRouter();

onBeforeRouteUpdate((to,from)=>{
	//console.log("on before route update",to)
})

onMounted(() => {
	console.log(route, "route");
	//console.log(router, "router");
});

function changeSomebody(){
	sname.value = "Mook"
}

function initCildData() {
	//someRef.value.initData(parentData)
	useSomething();
}

function changeRefData() {}
</script>

<style scoped lang="scss">
.parent {
	background-color: #f2f2f2;
	height: 200px;
	width: 100%;
	color: black;
	font-size: 30px;
}
.use-con {
	width: 100%;
	height: 400px;
	border: 2px solid orangered;
	color: red;
}
</style>
